<template>
    <div id="article-content">
        <el-row>
            <!-- 文章描述 -->
            <el-col :lg="{span:16}" class="description">
                <div class="title">{{content['title']}}</div>
                <div class="author-info">
                    <!-- 头像 -->
                    <div class="block">
                        <el-avatar :size="50" v-if="content['adminName']" :src="'http://localhost:8080/img/header/'+content['adminName']+'.jpg'"></el-avatar>
                    </div>
                    <!-- 用户信息 -->
                    <div class="info">
                        <div class="author-name">{{content['adminName']}}</div>
                        <!-- 文章信息 -->
                        <div class="infomation">
                            <div class="apply-time">{{content['time']}}</div>
                            <div class="read-num"><i class="iconfont icon-aixin_shixin"></i>&nbsp{{content['goodNum']}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 文章内容 -->
            <el-col :lg="{span:16}" class="pcontent">
                <mavon-editor
                        :value="content['content']"
                        :subfield = "false"
                        :defaultOpen = "'preview'"
                        :toolbarsFlag = "false"
                        :ishljs="true"
                        :boxShadow="true"
                        :codeStyle="codeStyle"
                        :transition="false">
                </mavon-editor>
            </el-col>
            <!--  侧边栏 -->
            <el-col :lg="{span:6}">
                <div  class="article-side">
                    <!-- 作者信息 -->
                    <div class="author-info">
                        <!-- 头像 -->
                        <div class="block">
                            <el-avatar :size="45" v-if="content['adminName']" :src="'http://localhost:8080/img/header/'+content['adminName']+'.jpg'"></el-avatar>
                        </div>
                        <!-- 用户信息 -->
                        <div class="info">
                            <div class="author-name">{{content['adminName']}}</div>
                            <!--<div class="apply-time"><span>信用分 </span>100</div>-->
                        </div>
                    </div>
                    <!-- 用户其他文章 -->
                    <div class="other-article">
                        <ul>
                            <li v-for="oneRecommend in recommendList">
                                <div @click="turnOtherArticle(oneRecommend['articleID'])">{{oneRecommend['title']}}</div>
                                <div class="visit-num"><i class="iconfont icon-aixin_shixin"></i>&nbsp{{oneRecommend['goodNum']}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="recommend-article">
                    <div><i class="iconfont icon-shuqian"></i>推荐阅读</div>
                    <ul>
                        <li v-for="onepop in mostPopList">
                            <div @click="turnOtherArticle(onepop['articleID'])">{{onepop['title']}}</div>
                            <div class="visit-num"><i class="iconfont icon-aixin_shixin"></i>&nbsp{{onepop['goodNum']}}</div>
                        </li>
                    </ul>
                </div>
            </el-col>

            <!-- 发表评论 -->
            <el-col :lg="{span:16}" class="gcomment">
                <give-comment :receive-url="receiveUrl" :give-comment="giveComment" :slot-message="slotMessage" @send-success="sendSuccess"></give-comment>
            </el-col>
            <!-- 评论区 -->
            <el-col :lg="{span:16}" class="comment-space">
                <!-- 单条评论 -->
                <el-col :lg="{span:24}" class="show-comment" v-for="oneComment in allCommentList">
                    <!-- 用户头像 -->
                    <el-col :lg="{span:2}">
                        <div class="block">
                            <el-avatar :size="45" v-if="oneComment['userName']" :src="'http://localhost:8080/img/header/'+oneComment['userName']+'.jpg'"></el-avatar>
                        </div>
                    </el-col>
                    <!-- 评论信息 -->
                    <el-col :lg="{span:20}" class="comment-message">
                        <div class="author-name">{{oneComment['userName']}}</div>
                        <div class="apply-time">{{oneComment['supplyTime']}}</div>
                        <div class="comment-content" v-html="oneComment['content']">
                        </div>
                    </el-col>
                </el-col>
                <!-- 回到顶部按钮 -->
                <el-col :lg="{span:12,offset:6}" class="btn-top">
                    <div @click="backup"><i class="iconfont icon-up1"></i></div>
                </el-col>
            </el-col>

        </el-row>
        <!-- 左侧点赞按钮 -->
        <div class="good" @click="addgood"><i class="iconfont icon-dianzan"></i></div>
        <!-- 收藏按钮 -->
        <div class="collect" @click="addCollection"><i class="iconfont icon-collection-b"></i></div>
    </div>
</template>

<script>
    import GiveComment from '../../components/givecomment/GiveComment'
    import axios from 'axios'
    export default {
        components: {GiveComment},
        name: "article-content",
        created(){
            window.document.body.style.backgroundColor='rgb(199, 219, 241)';
            this.articleID = this.$route.query.articleID;
            this.requestForMessage(this.articleID);
        },
        beforeRouteLeave(to,from,next){
            window.document.body.style.backgroundColor='';
            next();
        },
        data(){
            return{
                articleID:'',
                content:'',
                codeStyle:'gruvbox-light',
                headUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                allCommentList:[],
                receiveUrl:'http://127.0.0.1:8080/articleContent/addcomment',
                giveComment:{
                    'content':'',
                    'userName':'',
                    'articleID|floorIndex':''
                },
                floorIndex:'',
                slotMessage:'',
                adminName:'',
                recommendList:[],
                mostPopList:[]
            }
        },
        methods:{
            requestForMessage(articleID){
                //获取文章内容
                this.request({
                    url:'/articleContent/find/'+articleID+'/'+window.localStorage['username']
                }).then(res=>{
                    res.data['time'] = res.data['time'].substr(0,19);
                    this.content = res.data;

                    this.adminName = res.data['adminName'];
                    //获取文章推荐
                    this.request({
                        url:'/articleContent/recommend/'+this.adminName
                    }).then(res=>{
                        for(let i=0;i<res.data.length;i++){
                            this.recommendList.push(res.data[i]);
                        }
                    })

                }).catch(err=>{
                    console.log(err);
                });
                //获取评论内容
                this.request({
                    url:'/articleContent/getcomment/'+articleID
                }).then(res=>{
                    let tempIndex = '';
                    for(let i=0;i<res.data.length;i++){
                        res.data[i]['supplyTime'] = res.data[i]['supplyTime'].substr(0,19);
                        this.allCommentList.push(res.data[i]);
                        this.floorIndex = res.data[i]['floorIndex'];
                    }
                    this.slotMessage = articleID+'|'+(++this.floorIndex);
                });
                //获取最热文章
                this.request({
                    url:'/articleContent/mostpop'
                }).then(res=>{
                    for(let i=0;i<res.data.length;i++){
                        this.mostPopList.push(res.data[i]);
                    }
                })
            },
            clearAll(){
              //清空所有请求到的数据
                this.content = '';
                this.allCommentList = [];
                this.floorIndex = '';
                this.recommendList = [];
                this.mostPopList = [];
                this.slotMessage = '';
            },
            sendSuccess(giveComment){
                // this.floorIndex++;
                // this.allCommentList.push(giveComment);
                this.$router.go(0);
            },
            addgood(){
                let url = 'http://localhost:8080/articleContent/addgood';
                let userName = window.localStorage['username'];
                axios.post(url,{"userName":userName,"articleID":this.articleID}).then(res=>{
                    if(res.data == 2){
                        this.$message("您已经点过赞了！");
                        return;
                    }
                    this.$message("点赞成功！");
                })
            },
            backup(){
                let timer = setInterval(function(){
                    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let ispeed = Math.floor(-osTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                    this.isTop = true;
                    if(osTop === 0){
                        clearInterval(timer);
                    }
                },10);
            },
            turnOtherArticle(articleID){
                this.clearAll();
                this.articleID = articleID;
                this.requestForMessage(articleID);
            },
            addCollection(){
                let url = 'http://localhost:8080/collecAdd';
                let userName = window.localStorage['username'];
                axios.post(url,{"userName":userName,"articleId":this.articleID}).then(res=>{
                    if(res.data == '2'){
                        this.$message("您已收藏此文章！");
                        return;
                    }
                    this.$message("收藏成功！");
                })
            }
        },
        computed:{
        }
    }
</script>

<style scoped>
#article-content{
    margin-left: 130px;
    margin-top: 20px;
}

.description{
    padding: 25px;
    background-color: white;
    border-radius: 6px 6px 0 0;
}
.title{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #404040;
}
.author-info{
    display: flex;
}
.info{
    margin-left: 10px;
}
.author-name{
    font-size: 16px;
    font-weight: 500;
    color: inherit;
}
.apply-time{
    font-size: 12px;
    color: #969696;
    margin-top: 5px;
}
.article-side{
    padding: 20px;
    /*border: solid 1px #eee;*/
    margin-top: -155px;
    margin-left: 20px;
    background-color: white;
    border-radius: 6px;
}
.article-side .author-info{
    border-bottom: 1px solid #eee;
    height: 60px;
}
.other-article{
    margin-top: 20px;
}
.other-article ul li{
    font-size: 14px;
    color: #2D2D2D;
    margin-bottom: 20px;
}
 .article-side .author-name{
     font-size: 14px;
 }
.read-num{
    margin-left: 20px;
    margin-top: 5px;
}
.infomation{
    display: flex;
    margin-top: 5px;
}
 .infomation div{
     font-size: 13px;
     color: #969696;
 }
 .visit-num{
     font-size: 12px;
     color: #969696;
     margin-top: 5px;
 }
 .good{
     justify-content: center;
     width: 48px;
     height: 48px;
     font-size: 18px;
     border-radius: 50%;
     box-shadow: 0 2px 10px rgba(0,0,0,.05);
     background-color: #fff;
     color: rgb(150,150,150);
     text-align: center;
     line-height: 48px;
     position: fixed;
     top: 220px;
     left: 45px;
     cursor: pointer;
 }
 .good> .iconfont{
     font-size: 20px;
 }
 .show-comment{
     margin-top: 20px;
 }
 .show-comment .block{
     text-align: center;
     margin-top: 10px;
 }
 .comment-content{
    font-size: 16px;
     color: #404040;
     margin-top: 10px;
 }
 .comment-message{
     padding: 10px;
     border-bottom: 1px solid #eee;
 }
 .gcomment{
     margin-top: 20px;
 }
 .comment-space{
     background-color: white;
     padding: 0 5px 20px 5px;
     border-radius: 0 0 6px 6px;
     margin-top: -5px;
     margin-bottom: 50px;
 }
 .btn-top{
     text-align: center;
     margin-top: 20px;
 }
 .btn-top .iconfont{
     font-size: 30px;
     color: rgb(150,150,150);
     cursor: pointer;
 }
 .pcontent{

 }
 .recommend-article{
     margin-left: 20px;
     padding: 20px;
     margin-top: 10px;
     background-color: white;
     border-radius: 6px;
     position: absolute;
     width: 19.8%;
 }
 .recommend-article ul li{
     font-size: 14px;
     color: #2D2D2D;
     margin-bottom: 20px;
 }
 .recommend-article>div{
     margin-bottom: 10px;
 }
 .recommend-article>div .iconfont{
     margin-right: 5px;
 }
.infomation .iconfont{
    color: #e5e5e5;
}
.other-article .iconfont{
    color: #e5e5e5;
}
.recommend-article ul .iconfont{
    color:#e5e5e5;
}
 li{
     cursor: pointer;
 }
 .collect{
     justify-content: center;
     width: 48px;
     height: 48px;
     font-size: 18px;
     border-radius: 50%;
     box-shadow: 0 2px 10px rgba(0,0,0,.05);
     background-color: #fff;
     color: rgb(150,150,150);
     text-align: center;
     line-height: 46px;
     position: fixed;
     top: 300px;
     left: 45px;
     cursor: pointer;
     padding-left: 1px;
 }
</style>